小白網頁設計練成記-DAY19-選取器-符號

2022 iThome 鐵人賽

DAY 19

自我挑戰組

小白網頁設計練成記系列第 19 篇

14th鐵人賽 css 新手上路

Eric

2022-09-19 12:02:46

355 瀏覽

分享至

今天我們來認識六個符號，可以讓你的選取器有更多變化，以下是，/空格/ + / * / ~的說明:

逗號想成[或]的意思

換言之是可以有多個元素選取器一起編輯，套用一樣的樣式，看下方範例，h1/h2/p都是要設定為紅色:

<style>
        h1,h2,p{
            color:red;
    </style>
</head>
<body>
    <h1>這是標題一</h1>
    <h2>這是標題二</h1>
    <p>這是段落一</p>
</body>

顯示如下:

空格內層全部

我們先看範例:

<style>
section p{ 
            color:red;
        }
</style>
</head>
<body>
    <p>這是段落一</p>
    <div>
        <p>段落二</p>
        <section>
            <p>段落三</p>
        </section>
    </div>
</body>

顯示如下:

上述例子中，section p的意思是，只能選取section中的 p，其他的都不行，可以理解為在section家族中的p才能獲選!

> 限定第一層子元素

>比空格更嚴格，只有家族內的長子才能獲選~請看下面示範:

<style>
    div > p{
            color:red;
            }
</style>
</head>
<body>
    <p>這是段落一</p>
    <div>
        <p>段落二</p>
        <section>
            <p>段落三</p>
        </section>
    </div>

顯示如下:

從上面例子中，div家族中段落二是長子，而section就是次子，所以在>的條件下，只有長子能獲選，section次子只能乾瞪眼。

+ 同層的下一個元素，只有大弟或大妹獲選

+是獲取同層的目標，但只能是剛好排在後面的大弟或大妹。

<style>
div+p{
            color:red;
        } 
    </style>
</head>
<body>
    <p>這是段落一</p>
    <div>
        <p>段落二</p>
        <section>
            <p>段落三</p>
        </section>
    </div>
    <p>段落四</p>

顯示如下:

~ 同層後面的所有的元素-弟弟妹妹都獲選

~ 和 + 都是獲取同一層級的標籤，但是 ~ 範圍比較大，只要是弟弟妹妹都ok。

<style>
div~p{
            color:red;
        } 
    </style>
</head>
<body>
    <p>這是段落一</p>
    <div>
        <p>段落二</p>
        <section>
            <p>段落三</p>
        </section>
    </div>
    <p>段落四</p>
    <p>段落五</p>

顯示如下:

##　* 萬用元素，通通獲取
＊萬用元素，就是只要是元素，都在範圍內。

<style>
　　　＊{
            color:red;
        } 
    </style>
</head>
<body>
    <p>這是段落一</p>
    <div>
        <p>段落二</p>
        <section>
            <p>段落三</p>
        </section>
    </div>
    <p>段落四</p>
    <p>段落五</p>

顯示如下：